import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker} from '@tarojs/components'
import { AtList, AtListItem, AtTextarea,AtForm, AtInput, AtAvatar,AtButton,AtIcon} from "taro-ui"
import './zizhibeian.css'
import { $redirectTo, getGlobalData } from '../../../../global';
import app from '../../../../main.js'


export default class Zizhibeian extends Component {


    config = {  
    navigationBarTitleText: '资质备案',

    }

    constructor(props) {
        super(...arguments,props);
        this.state = {
            doctor:'',
            selector:['男','女'],
            is_show_info:true
        }
    }

    handleChange (index,event) {
        let a = this.state.doctor
        if(index == 1 ){
            a.speciality = event.target.value
            this.setState({
                doctor: a
            })
        }else if(index == 2){
            a.summary = event.target.value
            this.setState({
               doctor : a
            })
        }else{
            a.age = event
            this.setState({
                doctor : a
            })
        }
    }

    componentDidShow() {
        this.getDoctor();
    }


    getDoctor() {
        var me = this;
        var data = {id: me.$router.params.id};
            app.get("web/doctor/get", data, function(res) {
                // console.log(res)
                me.setState({
                    doctor:res.data.result
                })
        })
    }

    post(){
        let data = {
            token:'sss',
            id:this.$router.params.id || this.state.doctor.id,
            speciality:this.state.doctor.speciality,
            summary:this.state.doctor.summary,
        }
        app.post('web/doctor/saveInfo', data, function(res){
            app.navigateTo('../zizhibeiantupian/zizhibeiantupian')
        })
    }

    onsexChange = e => {
        let a = this.state.doctor
        a.gender = this.state.selector[e.detail.value]
        this.setState({
          doctor: a
        })
    }

    uploadHeadImage() {
        var me = this;
        Taro.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success(res) {
                console.log(res);
                const tempFilePaths = res.tempFilePaths
                Taro.uploadFile({
                url: app.apiUri + '/admin/upload/image',
                filePath: tempFilePaths[0],
                name: 'file',
                formData: {
                    name: 'file'
                },
                success(res) {
                    let data = JSON.parse(res.data);
                    if (data.status == 200) {
                    let doctor = me.state.doctor;
                    doctor.head_image = data.result;
                    me.setState({
                        doctor: doctor
                    });
                    }
                }
                })
            }
        })
    }
    
    closeInfo () {
        this.setState({
            is_show_info:false
        })
    }
    

    render() {
        return (
            <View className='zizhibeian'>
                {
                  (this.state.doctor.auth_status == '资质通过' && this.state.is_show_info)
                  &&
                  <View className='auth_info auth_info_success'>
                    <View className='info_title'>您的资质认证已审核通过</View>
                    <AtIcon value='close-circle' size='18' color='#ffffff' className='info_icon' onClick={this.closeInfo.bind(this)}></AtIcon>
                  </View>
                }
                {
                  (this.state.doctor.auth_status == '资质不通过' && this.state.is_show_info)
                  &&
                  <View className='auth_info auth_info_fail'>
                    <View className='info_title'>您的资质认证审核不通过{!app.isEmpty(this.state.doctor.zizhi_reason) ? ('，'+this.state.doctor.zizhi_reason) : ''}</View>
                    <AtIcon value='close-circle' size='18' color='#ffffff' className='info_icon' onClick={this.closeInfo.bind(this)}></AtIcon>
                  </View>
                }
                {
                  (this.state.doctor.auth_status == '资质审核中' && this.state.is_show_info)
                  &&
                  <View className='auth_info auth_info_correct'>
                    <View className='info_title'>您的资质认证正在审核中</View>
                    <AtIcon value='close-circle' size='18' color='#ffffff' className='info_icon' onClick={this.closeInfo.bind(this)}></AtIcon>
                  </View>
                }
                
                <AtList>
                    {/* <AtListItem title='性别'  extraText={this.state.doctor.gender} /> */}
                    <AtListItem title='姓名' extraText={this.state.doctor.name} />
                    <AtListItem title='职称'  extraText={this.state.doctor.positional_title} />
                    <AtListItem title='医院'  extraText={this.state.doctor.hospital} />               
                    <AtListItem title='科室'  extraText={this.state.doctor.department} />     
                    <AtListItem title='手机号' extraText={this.state.doctor.phone} /> 
                </AtList>

                <View className='body'>
                    <View className='body-box'>
                        <View className='body-text'>擅长</View>
                        <AtTextarea
                            className='textarea'
                            value={this.state.doctor.speciality == null ? '' : this.state.doctor.speciality}
                            onChange={this.handleChange.bind(this,1)}
                            maxLength={500}
                            placeholder='请输入您的擅长领域，信息将会被展示在医生主页，字数范围为1-500字'
                        />
                    </View>

                    <View className='body-box'>
                        <View className='body-text'>简介</View>
                        <AtTextarea
                            className='textarea'
                            value={this.state.doctor.summary == null ? '' : this.state.doctor.summary}
                            onChange={this.handleChange.bind(this,2)}
                            maxLength={500}
                            placeholder='请输入您的个人简介，信息将会被展示在医生主页，字数范围为1-500字'
                        />
                    </View>
                </View>
                
                <View className='empty'></View>
                <AtButton type='primary' className='btn' onClick={this.post.bind(this)}>下一步</AtButton>

            </View>
        )
    }
}
